<template lang="html">
  <div class="">
    <div class="quanbu clear">
        <span class="rmgj_span"></span>
        <h3 class="rmgj_h3">热门目的地</h3>
    </div>
    <div id="hotDest" class="quan_bu">
        <ul class="clear">
          <li class="li_first" v-for="item in conts.datare">
              <span @click="transf(item.recountry)" class="quan_bu_sp" d-code="102621043">{{item.recountry}}</span>
          </li>
        </ul>
    </div>
    <div class="" v-for="list in conts.listcountrys">
      <div class="zi_mu" :id="list.zimu">{{list.zimu}}</div>
      <div class="zi_mu_fen">
        <span @click="transf(list1)" d-code="113144893" v-for="list1 in list.countrys">{{list1}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '../../js/bus'
export default {
  props:['conts'],
  methods:{
    transf(data){
      console.log(data);
      bus.$emit('cityname',data)
    }
  }
}
</script>

<style lang="css" scoped>
.quanbu {
    width: 100%;
    padding-bottom: 10px;
    background-color: #fff;
}
.quan_bu{
  background-color: #fff;
}
.rmgj_h3 {
    width: 56%;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #333333;
    float: left;
    padding-top: 5px;
    padding-left: 10px;
    font-family: "Microsoft YaHei";
    text-align: left;
}
.clear::after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
.quan_bu {
    padding: 0px 15px;
}
.quan_bu ul {
    width: 100%;
}
.quan_bu ul li.li_first {
    margin-left: 0px;
}
.quan_bu ul li {
    width: 32%;
    float: left;
    margin-left: 2%;
    font-size: 14px;
    color: #666666;
    text-align: center;
    margin-bottom: 10px;
}
.quan_bu_sp {
    display: block;
    padding: 3px 2px;
    background-color: #FFF;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
}
.zi_mu {
    padding: 5px 15px;
    background-color: #f9f9f9;
    color: #666666;
    font-size: 18px;
    text-align: left;
}
.zi_mu_fen {
    padding: 0px 15px;
    background-color: #FFF;
    text-align: left;
}
.zi_mu_fen span {
    border-bottom: 1px solid #d1d1d1;
    font-size: 16px;
    padding: 15px 0;
    width: 100%;
    display: block;
}
</style>
